<template>
	<div class="MobileRegister">
		<a @click="$router.go(-1)"><</a>
				<el-form :model="ruleForm" :status-icon="true" :rules="rules" ref="ruleForm" class="demo-ruleForm">
					<el-form-item>
						<h1>Register</h1>
					</el-form-item>
					<el-form-item  prop="account" >
						<el-input v-model="ruleForm.account" placeholder="请输入账号"></el-input>
					</el-form-item>
					<el-form-item  prop="password">
						<el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item  prop="nextPassword">
						<el-input v-model="ruleForm.nextPassword" placeholder="请再次输入密码"></el-input>
					</el-form-item>
					<el-form-item  prop="nickname">
						<el-input v-model="ruleForm.nickname" placeholder="请输入昵称"></el-input>
					</el-form-item>
					<el-form-item  prop="phone">
						<el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="Register()">立即创建</el-button>
						<hr>
						<p>Already a customer? <span @click="login()">Login now</span></p>
					</el-form-item>
				</el-form>
	</div>
</template>

<script>
	export default {
		name: 'MobileRegister',
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.password !== '') {
						this.$refs.ruleForm.validateField('nextPassword');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				fileList: [],
				ruleForm: {
					nickname: '',
					account: '',
					password: '',
					nextPassword: '',
					phone: '',
					vip: 0,
					role: 'usr',
					addr: '',
				},
				rules: {
					nickname: [{
						 required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					account: [{
						 required: true,
						message: '请输入账号',
						trigger: 'blur'
					}, ],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					nextPassword: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					phone: [
						{
							required: true,
							min: 11,
							message: '长度在 11位',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login() {
				this.$router.push({
					path: '/mobile/login',
				})
			},
			Register() {
				console.log(this.ruleForm);
				let formData = new FormData();
				let fs = this.fileList;
				if (fs.length > 0 && fs[0].raw != null) {
					formData.append("mypic", fs[0].raw);
				}
				formData.append('nickname', this.ruleForm.nickname);
				formData.append('account', this.ruleForm.account);
				formData.append('password', this.ruleForm.password);
				formData.append('role', this.ruleForm.role);
				formData.append('phone', this.ruleForm.phone);
				formData.append('vip', this.ruleForm.vip);
				formData.append('addr', this.ruleForm.addr);
				this.$postf('/api/public/addUser', formData).then((resp) => {
					console.log(resp.data);
					if (resp.data.code == 200) {
						this.imageUrl = resp.data.data.img;
						this.$message({
							message: resp.data.msg,
							type: 'success'
						})
					} else {
						this.$message({
							message: resp.data.msg,
							type: 'error'
						})
					}
					this.ruleForm = {};
				})
			}
		}
	}
</script>

<style scoped>
	.MobileRegister {
		width: 100%;
		height: 100%;
		background: #313541;
		background-image: url('../../assets/img/mobile/bgimage.jpg');
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.MobileRegister .demo-ruleForm {
		background-color: white;
		width: 90%;
		position: fixed;
		text-align: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.MobileRegister a {
		width: 100%;
		height: 30px;
		font-size: 1.5rem;
		margin-left: 1rem;
		position: fixed;
		top: 10px;
		color: gray;
	}

	.MobileRegister .demo-ruleForm .el-input {
		width: 80%;
		height: 2.5rem;
		margin-top: 0.625rem;
	}
	.MobileRegister .demo-ruleForm ::v-deep .el-form-item__error{
		    color: #ef0303;
		    font-size: 12px;
		    line-height: 1;
		    padding-top: 4px;
		    position: absolute;
		    top: 100%;
		    left: 10%;
	}
	.MobileRegister .demo-ruleForm button {
		width: 81%;
		height: 2.5rem;
		color: white;
		background-color: #8980b6;
		border: none;
		border-radius: 0.3125rem;
	}

	.MobileRegister .demo-ruleForm h1 {
		display: block;
		height: 5rem;
		line-height: 8rem;
	}

	.MobileRegister .demo-ruleForm hr {
		margin-top: 1.25rem;
		width: 80%;
	}

	.MobileRegister .demo-ruleForm p {
		display: block;
		color: #757578;
		font-size: 0.9375rem;
	}

	.MobileRegister .demo-ruleForm span {
		color: #af4ac1;
	}
</style>